<template>
  <div id="code">
    <mu-appbar title="生成礼品码" style="background-color:#409EFF">
      <mu-icon-button  icon="arrow_back_ios" slot="left" :to="{name: 'Home' }"/>
    </mu-appbar>

    <mu-list>
      <mu-list-item title="创建礼品码" @click="handleCreateCode()">
        <mu-avatar v-bind:src="this.$image.icon1" slot="leftAvatar"/>
        <mu-icon value="arrow_forward"  slot="right"/>
      </mu-list-item>
      <mu-list-item title="创建礼品码记录" :to="{name: 'CreateCodeDetail' }">
        <mu-avatar v-bind:src="this.$image.icon2" slot="leftAvatar"/>
        <mu-icon value="arrow_forward" slot="right"/>
      </mu-list-item>
      <mu-list-item title="">
        <mu-avatar v-bind:src="this.$image.icon3" slot="leftAvatar"/>
        <div class="mu-item-title">可用金币数量<span style="color:green">{{this.availableNdot}}</span>个</div>
        <mu-icon value="arrow_forward" slot="right"/>
      </mu-list-item>
      <mu-list-item title="领取礼品码记录" :to="{name: 'UseCodeDetail' }">
        <mu-avatar v-bind:src="this.$image.icon4" slot="leftAvatar"/>
        <mu-icon value="arrow_forward" slot="right"/>
      </mu-list-item>
      <mu-list-item title="" v-if="this.isCarrieroperator">
        <mu-avatar v-bind:src="this.$image.icon1" slot="leftAvatar"/>
          <div class="mu-item-title">可提取业绩总数<span style="color:green">{{this.totalGetNdot}}</span>个</div>
        <mu-icon value="arrow_forward" slot="right"/>
      </mu-list-item>
    </mu-list>

    <el-dialog title="创建礼品码" :visible.sync="dialogFormVisible">
      <el-row>
        <span>可用：{{this.availableNdot}}个</span>
      </el-row>
      <el-form :model="form">
        <el-form-item label="请输入金币数量">
          <el-input v-model="form.ndot" size="mini" maxlength="8" minlength="1"></el-input>
        </el-form-item>
        <el-form-item label="请输入礼品码数量">
          <el-input v-model="form.num" size="mini" maxlength="3" minlength="1"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<style>
#code .el-dialog {
  width: 70%
}
#code .el-row {
  margin-bottom: 16px;
}
#code .el-form-item__content {
  margin-bottom: -24px
}
#code form.el-form {
  margin-top: -24px;
}
</style>

<script>
export default {
  data () {
    return {
      formLabelWidth: '120px',
      dialogFormVisible: false,
      form: {
        ndot: 0,
        num: 1,
        codeType: 1,
        account: sessionStorage.getItem('account')
      },
      availableNdot: 0,
      isCarrieroperator: false,
      totalGetNdot: 0
    }
  },
  methods: {
    handleCreateCode () {
      this.dialogFormVisible = true
      this.getAvailableNdot()
    },
    validate () {
      for (let item in this.form) {
        if (this.form[item].length === 0) {
          this.$message.error('请完善信息')
          return false
        }
      }
      return true
    },
    handleSubmit () {
      if (this.form.ndot > this.availableNdot) {
        this.$message({
          showClose: true,
          message: '最大值不允许超出可用金币',
          type: 'warning'
        })
        return false
      }

      if (typeof Number(this.form.num) !== 'number' || Number(this.form.num) % 1 !== 0 || Number(this.form.num) <= 0) {
        this.$message({
          showClose: true,
          message: '请输入整数数量',
          type: 'success'
        })
        return false
      }

      if (typeof Number(this.form.ndot) !== 'number' || Number(this.form.ndot) % 1 !== 0 || Number(this.form.ndot) <= 0) {
        this.$message({
          showClose: true,
          message: '请输入整数个金币',
          type: 'success'
        })
        return false
      }

      let that = this

      if (this.validate()) {
        this.$axios({
          method: 'get',
          url: '/api/CarrieroperatorService.createCode',
          params: this.form
        })
        .then(function (resp) {
          if (resp.data.status === 'success') {
            that.$message({
              showClose: true,
              message: '创建成功',
              type: 'success'
            })
            that.dialogFormVisible = false
            that.$router.push({name: 'CreateCodeDetail'})
          } else {
            that.$message({
              showClose: true,
              message: resp.data.cause,
              type: 'warning'
            })
          }
        })
      }
    },
    getAvailableNdot () {
      if (sessionStorage.getItem('role') === 'admin' || sessionStorage.getItem('role') === 'gm') {
        this.availableNdot = 99999999
      } else {
        let that = this
        this.$axios({
          method: 'get',
          url: '/api/AgentService.getAvailableNdot',
          params: {'account': sessionStorage.getItem('account')}
        })
        .then(function (resp) {
          if (resp.data.status === 'success') {
            that.availableNdot = resp.data.data
          } else {
            that.$message({
              showClose: true,
              message: resp.data.cause,
              type: 'warning'
            })
          }
        })
      }
    },
    getTotalGetNdot () {
      let that =  this
      this.$axios({
        method: 'get',
        url: '/api/CarrieroperatorService.getTotalGetNdot'
      })
      .then(response => {
        if (response.data.status === 'success') {
          that.totalGetNdot = response.data.data
        } else {
          that.$message({
            showClose: true,
            message: response.data.cause,
            type: 'warning'
          })
        }
      })
    }
  },
  mounted () {
    this.getAvailableNdot()
    if (sessionStorage.getItem('role') === 'carrieroperator') {
      this.isCarrieroperator = true
      this.getTotalGetNdot()
    }
  }
}
</script>
